<template>
  <view class="container">
    <image src="https://siha.vxmeng.com/static/component/loadingIcon.png" :class="{ 'moving-image': isAnimating }"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isAnimating: false
    };
  },
  mounted() {
	  this.restartAnimation()
  },
  methods: {
    restartAnimation() {
      this.$nextTick(() => {
        this.isAnimating = true;
      });
      setTimeout(() => {
        this.isAnimating = false;
		this.updateParentData()
      }, 1000);
    },
		updateParentData() {
			this.$emit('updateParentData', 'false');
		}
  },
  
};
</script>

<style lang="less" scoped>
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
	overflow: hidden;
}

.moving-image {
  position: absolute;
  right: -170px;
  bottom: -100px;
  width: 340px;
  height: 240px;
  animation: moveToTopLeft 2s forwards;
}

@keyframes moveToTopLeft {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100vw, -120vh);
  }
}
</style>
